import React, { useEffect, useState } from 'react';
import { sale_list, sale_list_search, sale_list_del, sale_list_add, sale_list_somedel, sale_list_edit, sale_list_feng } from '../../../utils/sale';
import { Input, Table, notification, Modal, Form, Button } from 'antd';
import { DeleteOutlined, FormOutlined } from '@ant-design/icons';
import '../../../style/cheapcard.scss';
const { Search } = Input;
function Cheapcard(props) {
    const [selectedRowKeys, setSelectedRowKeys] = useState([]);
    var [data, setData] = useState([]);
    var [from] = Form.useForm();
    var [openedit, setOpenedit] = useState(false);
    var [id, setId] = useState();
    var [openadd, setOpenadd] = useState(false);
    var [pagination, setPagination] = useState({ current: 1, pageSize: 10, total: 50 })
    //获取列表接口
    useEffect(() => {
        sale_list().then((res) => {
            setData(res.data)
        })
    }, [])
    //搜索接口
    const onSearch = (value) => {
        sale_list_search({ name_like: value }).then((res) => {
            console.log(res.data);
            setData(res.data)
        })
    };
    //删除接口
    var handleclick = (record) => {
        console.log(record);
        sale_list_del(record.id).then((res) => {
            notification.success({
                placement: "top",
                message: '删除成功'
            })
            sale_list().then((res) => {
                setData(res.data)
            })
        })
    }
    //编辑接口
    var edit = (record) => {
        setOpenedit(true)
        from.setFieldsValue(record)
        setId(record.id)
    }
    //提交表单触发的回调
    var onFinishedit = (values) => {
        sale_list_edit(id, { name: values.name, type: values.type, range: values.range, status: values.status, time: values.time }).then((res) => {
            sale_list().then((res) => {
                setData(res.data)
            })
            notification.success({
                placement: "top",
                message: '编辑成功'
            })
            displayedit()
        })
    }
    var displayedit = () => {
        setOpenedit(false)
    }
    const columns = [
        {
            title: '优惠券名称',//表格列的名字(显示在表格头上)
            dataIndex: 'name',//数据对应的属性名
            // key: 'name' //key是必须的,每一列不同.
        },
        {
            title: '优惠券类型',
            dataIndex: 'type',
            // key: 'type'
            // key: 'type'

        },
        {
            title: '使用范围',
            dataIndex: 'range',
            // key: 'Range'
        },
        {
            title: '优惠券状态',
            dataIndex: 'status',
            // key: 'status'
        },
        {
            title: '有效期',
            dataIndex: "time",
            // key: 'time'
        },
        {
            title: '操作',
            render: (_, record) => (
                <>
                    <i onClick={() => { edit(record) }} className='iconfont icon-delete'><FormOutlined style={{ color: "green", fontSize: 18, paddingLeft: 5 }} /></i>
                    <i onClick={() => { handleclick(record) }} className='iconfont icon-delete'><DeleteOutlined style={{ color: "red", fontSize: 18, paddingLeft: 5 }} /></i>
                </>
            ),
        },
    ];

    //选择发生改变的回调
    const onSelectChange = (newSelectedRowKeys) => {
        setSelectedRowKeys(newSelectedRowKeys);
    };
    const rowSelection = {
        onChange: onSelectChange,
    };
    //分页
    const handleChange = (pagination) => {
        setPagination(pagination)
        sale_list_feng({ _page: pagination.current, _limit: pagination.pageSize }).then((res) => {
            sale_list().then((res) => {
                setData(res.data)
            })
        })
    }
    //新增接口
    var add = () => {
        setOpenadd(true);
    }
    var onFinishadd = (values) => {
        sale_list_add({ name: values.name, type: values.type, range: values.range, status: values.status, time: values.time, key: Number(data.length + 1) }).then((res) => {
            sale_list().then((res) => {
                setData(res.data)
            })
            notification.success({
                placement: "top",
                message: '添加成功'
            })
            displayadd()
        })
    }
    var displayadd = () => {
        setOpenadd(false)
    }
    //批量删除
    var somedel = () => {
        selectedRowKeys.map((item) => {
            sale_list_somedel(item).then((res) => {
                sale_list().then((res) => {
                    setData(res.data)
                })
            })
        })
    }

    return (
        <div className='cheapcard'>
            <div className='headerbox'>
                <p> 营销 / 优惠券</p>
                <h2>优惠券</h2>
            </div>
            <div className='addbutton'>
                <Search
                    placeholder="请输入搜索名称"
                    allowClear
                    enterButton="搜索"
                    style={{ width: 400, marginLeft: 10 }}
                    onSearch={onSearch}

                />
                <Button onClick={() => { somedel() }} type="primary">批量删除</Button>
                <Button style={{ marginRight: 20 }} type="primary" onClick={() => { add() }}>新增优惠券</Button>
            </div>
            <div>
                {/* 表格组件 */}
                {/* columns 表格每一列如何渲染 */}
                {/* dataSource 表格的数据源 */}
                {/* pagination 分页 */}
                {/* onChange 分页的回调 */}
                {/* rowSelection 表格行的选择 */}
                <Table columns={columns} dataSource={data}
                    rowSelection={rowSelection} pagination={pagination} onChange={handleChange} />
            </div>
            <Modal title="新增优惠券" open={openadd} onCancel={displayadd}>
                <Form
                    className='box'
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 18 }}
                    onFinish={onFinishadd}
                >
                    <Form.Item
                        label="优惠券名称"
                        name="name"
                        rules={[{ required: true, message: '输入优惠券名称' }]}
                    >
                        <Input placeholder='请输入优惠券名称' />
                    </Form.Item>

                    <Form.Item
                        label="优惠券类型"
                        name="type"
                        rules={[{ required: true, message: '输入优惠券类型' }]}
                    >
                        <Input placeholder='请输入优惠券类型' />
                    </Form.Item>
                    <Form.Item
                        label="使用范围"
                        name="range"
                        rules={[{ required: true, message: '输入范围' }]}
                    >
                        <Input placeholder='请输入使用范围' />
                    </Form.Item>

                    <Form.Item
                        label="状态"
                        name="status"
                        rules={[{ required: true, message: '输入状态' }]}
                    >
                        <Input placeholder='请输入状态' />
                    </Form.Item>

                    <Form.Item
                        label="时间"
                        name="time"
                        rules={[{ required: true, message: '输入修改时间' }]}

                    ><Input placeholder='请输入修改时间' />
                    </Form.Item>

                    <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                        <Button type="primary" htmlType="submit">编辑完成</Button>
                    </Form.Item>
                </Form>
            </Modal>
            <Modal title="编辑优惠券" open={openedit} onCancel={displayedit}>
                <Form
                    className='box'
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 18 }}
                    onFinish={onFinishedit}
                    form={from}
                >
                    <Form.Item
                        label="优惠券名称"
                        name="name"
                        rules={[{ required: true, message: '输入优惠券名称' }]}
                    >
                        <Input placeholder='请输入优惠券名称' />
                    </Form.Item>

                    <Form.Item
                        label="优惠券类型"
                        name="type"
                        rules={[{ required: true, message: '输入优惠券类型' }]}
                    >
                        <Input placeholder='请输入优惠券类型' />
                    </Form.Item>

                    <Form.Item
                        label="使用范围"
                        name="range"
                        rules={[{ required: true, message: '输入范围' }]}
                    >
                        <Input placeholder='请输入使用范围' />
                    </Form.Item>

                    <Form.Item
                        label="状态"
                        name="status"
                        rules={[{ required: true, message: '输入状态' }]}
                    >
                        <Input placeholder='请输入状态' />
                    </Form.Item>

                    <Form.Item
                        label="时间"
                        name="time"
                        rules={[{ required: true, message: '输入修改时间' }]}

                    ><Input placeholder='请输入修改时间' />
                    </Form.Item>

                    <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                        <Button type="primary" htmlType="submit">编辑完成</Button>
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    );
}
export default Cheapcard;